<template>
    <div class="login">
        <el-form :model="form" :rules="rules" ref="form">
            <div class="login_box">
                <h1> 登录系统</h1>
                <el-form-item prop="account">
                    <el-input prefix-icon="el-icon-search" v-model="form.account"
                        :class="{ username: username, usernames: usernames }" @focus="uname" @blur="unames"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock " v-model="form.password"
                        :class="{ password: password, passwords: passwords }" @focus="pad" @blur="pads" @keydown.native.enter="submits"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submits">登录</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
import { checkLogin } from "@/api/user.js";
import local from '@/utils/local.js'
export default {

    data() {
        return {
            form: {
                account: '',
                password: '',
            },
            username: true,
            usernames: false,
            password: true,
            passwords: false,
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            },
        }
    },
    methods: {
        // 登录事件
        submits() {
            this.$refs.form.validate(async result => {
                if (result) {
                    let res = await checkLogin(this.form)
                    console.log(res);
                    if(res.data.code===0){
                        local.set("token",res.data.token)
                        local.set("role",res.data.role)
                    await  this.$router.push('/index')
                    // 登录成功重新加载路由
                    window.location.reload()
                    }
                }
            });

        },
        // 获取焦点
        //账号
        uname() {
            this.username = false;
            this.usernames = true;
        },
        // 密码
        pad() {
            this.password = false;
            this.passwords = true;
        },
        // 失去焦点
        // 账号
        unames() {
            this.username = true;
            this.usernames = false;
            if (this.form.username !== "") {
                this.username = false;
            }
        },
        // 失去焦点
        // 密码
        pads() {
            this.password = true;
            this.passwords = false;
            if (this.form.password !== "") {
                this.password = false;
            }
        },
    }
}
</script>
<style lang="less" scoped>
.login::after {
    content: '';
    /* 必须的属性 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom right, #dbe464, rgb(123, 218, 162), #f18e9b);
    background-size: cover;
    z-index: -1;
}

.login {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .username::after,
    .usernames::after,
    .password::after,
    .passwords::after {
        content: "账号";
        color: #c0c4cc;
        display: block;
        top: 0px;
        left: 33px;
        position: absolute;
        font-size: 14px;
        transition: all 0.5s;
        // 鼠标点击穿透
        pointer-events: none;
    }
    .password::after {
        content: "密码";
    }

    .usernames::after,
    .passwords::after {
        content: "账号";
        top: -20px;
        color: #409eff;
    }
    .passwords::after {
        content: "密码";
    }

    input {
        position: relative;

    }

    input::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        filter: blur(10px);
        z-index: -1;
    }
    .login_box {
        position: relative;
        width: 400px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0 20px;
        border-radius: 10px;
        border: 1px solid rgb(255, 255, 255, 0.5);
        border-right: 1px solid rgba(63, 62, 62, 0.2);
        border-bottom: 1px solid rgba(63, 62, 62, 0.2);

        background-color: #ffffff45;

        h1 {
            width: 100%;
            text-align: center;
            position: relative;
            color: #ffffff;
            font-size: 25px;
        }

        .el-button {
            width: 100%;
        }

        .el-form-item {
            width: 300px;
        }
    }

    /* 小于等于手机屏幕尺寸 400px 时样式 */
    @media screen and (max-width: 500px) {

        /* 添加您想要的样式 */
        .login_box {
            height: 280px;
            width: 85%;
            margin: 0 auto;
        }

    }
}
</style>